<template> <!--弹窗组件-->
    <div>
        <div class="dialog-wrap">
            <div class="dialog-cover"
             v-if="isShow"
            @click="closeMyself"></div><!--黑色背景-->
            <transition name="drop">
                <div class="dialog-content" v-if="isShow"><!--弹出框-->
                    <p class="dialog-close" @click="closeMyself">x</p>
                    <slot>empty</slot>
                </div>
            </transition>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        props:{
        isShow:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return {

        }
    },
    methods:{
        closeMyself(){
            this.$emit('on-close')  //监听，触发该方法，传递给layout
        }
    }
    }

</script>
<style scoped>
.drop-enter-active {
    transition: all .5s ease;
}

.drop-leave-active {
    transition: all .3s ease;
}

.drop-enter {
    transform: translateY(-500px);
}
.drop-leave-active {
    transform: translateY(-500px);
}
.dialog-wrap {
  position:fixed;
  width:100%;
  height:100%;
}

.dialog-cover {
    background:#000;
    opacity:.3;
    position:fixed;
    z-index:5;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.dialog-content {
    width:50%;
    position:fixed;
    max-height:50%;
    overflow: auto;
    background:#fff;
    top:20%;
    left:50%;
    margin-left:-25%;
    z-index:10;
    border:2px solid #464068;
    padding:2%;
    line-height:1.6;
}

.dialog-close {
    position:absolute;
    top:5px;
    right:5px;
    cursor: pointer
}
</style>